<template>
	<view class="transaction">
		<view class="transactionContent">
			<view class="zc">
				<image src="/static/image/assets/btc_bcg.png" />
				<view>
					<view class="title">总资产</view>
					<view class="usdtsl"> {{ assets.ue_money }} USDT </view>
				</view>
			</view>
			<view class="btns">
				<view
					class="cz_btn"
					:class="tabsIndex == 0 ? 'active' : ''"
					@click="handleClickTabs(0)"
				>
					充值
				</view>
				<view
					class="tb_btn"
					:class="tabsIndex == 1 ? 'active' : ''"
					@click="handleClickTabs(1)"
				>
					提币
				</view>
			</view>
			<view class="cz_content" v-if="tabsIndex === 0">
				<view class="czm">
					<view class="title">充值地址</view>
					<view class="ewm_img">
						<image :src="rechargeInfo.pay_ercode_url" />
					</view>
					<view class="czm_code">
						<text>{{ rechargeInfo.pay_code }}</text>
						<image
							src="/static/image/assets/copy_icon.png"
							@click="copy(rechargeInfo.pay_code)"
						/>
					</view>

					<label :style="{ display: `flex`, alignItems: `center`, marginTop: `30rpx` }">
						<text :style="{ fontSize: `28rpx` }">充值数量：</text>
						<input
							:style="{ fontSize: `28rpx` }"
							type="number"
							v-model="rechargeAmount"
							placeholder="请输入充值数量"
						/>
					</label>
					<label :style="{ display: `flex`, alignItems: `center`, marginTop: `30rpx` }">
						<text :style="{ fontSize: `28rpx` }">充值地址：</text>
						<input
							:style="{ fontSize: `28rpx` }"
							v-model="rechargeAddress"
							placeholder="请输入充值地址"
						/>
					</label>

					<view class="btn" :style="{ marginTop: `60rpx` }" @click="submit">提交</view>
				</view>
				<view class="wxts">
					<view class="title">温馨提示</view>
					<view class="list">
						<text>
							<text>1.请勿向上述地址充值任何非</text>
							<text :style="{ color: `#ff3608` }">TRC20_USDT</text>
							<text>资产,否则资产将不可找回。最小充值金额: 50USDT。</text>
						</text>

						<text>2.您充值至上述地址后,需要整个网络节点的确认。</text>
						<text
							>3.充值审核时间为工作日9:00 - 18:00, 如超过3小时未到账请联系客服。</text
						>

						<text>
							4.小于最小金额的充值将不会上账且无法退回，充值时请仔细核对充值地址。
						</text>
					</view>
				</view>
			</view>
			<view class="tb_contnet" v-else>
				<view class="tbsl">
					<view class="item">
						<view class="tips">提币地址</view>
						<view class="inputs">
							<input
								type="text"
								v-model="viewModel.address"
								placeholder="输入地址"
								placeholder-style="color:#666666"
							/>
						</view>
					</view>
					<view class="item">
						<view class="tips">提币数量</view>
						<view class="inputs">
							<input
								type="text"
								v-model="viewModel.amount"
								placeholder="输入提币数量"
								placeholder-style="color:#666666"
							/>
						</view>
					</view>
					<view class="item">
						<view class="tips">交易密码</view>
						<view class="inputs">
							<input
								type="password"
								maxlength="6"
								v-model="viewModel.password"
								placeholder="输入交易密码"
								placeholder-style="color:#666666"
							/>
						</view>
					</view>
					<view
						:style="{
							display: `flex`,
							justifyContent: `center`,
							alignItems: `center`,
							flexDirection: `column`,
							padding: `30rpx`,
						}"
					>
						<image
							:style="{ width: `180rpx`, height: `180rpx` }"
							:src="viewModel.qrCode"
							mode="aspectFit"
						/>
						<text
							:style="{
								fontSize: `28rpx`,
								marginTop: `12rpx`,
							}"
						>
							收款二维码
						</text>
					</view>
				</view>
				<view class="wxts">
					<view class="title">温馨提示</view>
					<view class="list">
						<text>1. 最小USDT提现金额为 15 USDT</text>
						<text>
							2. 提现审核时间为工作日9:00 - 18:00, 如超过3小时未到账请联系客服
						</text>
						<text>3. 提现手续费为 15 USDT</text>
					</view>
				</view>
				<view class="btn" @click="extract">确认提币</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { sleep } from "@/static/utils";
	export default {
		data() {
			return {
				tabsIndex: 0,
				rechargeInfo: {},
				assets: {},

				viewModel: {
					address: "",
					amount: "",
					qrCode: "",
					password: "",
				},

				rechargeAmount: "",
				rechargeAddress: "",
			};
		},
		onLoad() {
			this.$request.get("/Home/info/me").then(({ data }) => {
				this.assets = data;
				this.viewModel.qrCode = data.usdt_qr_src;
				this.viewModel.address = data.usdt_src;
			});
			this.$request.get("/Home/info/change").then(({ data }) => {
				this.rechargeInfo = data;
			});
		},
		onNavigationBarButtonTap(e) {
			if (e.float !== "right") return;
			uni.navigateTo({ url: "/pages/assets/assetsDetail" });
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			handleClickTabs(index) {
				this.tabsIndex = index;
			},
			copy(data) {
				uni.setClipboardData({
					data,
					success: () => uni.showToast({ icon: "none", title: "已复制" }),
				});
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: ({ tempFilePaths }) => {
						this.viewModel.qrCode = tempFilePaths[0];
					},
				});
			},
			submit() {
				this.$request
					.get("/Home/info/chongzhiTrue", {
						money: this.rechargeAmount,
						qb_src: this.rechargeAddress,
						lian: "TRC20",
					})
					.then(({ msg: title }) => uni.showToast({ title }));
			},
			async extract() {
				if (!Object.values(this.viewModel).every(Boolean)) {
					uni.showToast({
						title: "请检查信息是否填写完整",
						icon: "none",
					});
					return;
				}

				const { msg } = await this.$request.get("/Home/info/edit_exchange", {
					kymoney: this.viewModel.amount,
					code: this.viewModel.address,
					huobi: "usdt",
					qrcode: this.viewModel.qrcode,
					aq_pwd: this.viewModel.password,
				});
				await uni.showToast({ title: msg });
				await sleep(1.5);

				uni.navigateTo({ url: "/pages/assets/assetsDetail" });
			},
		},
	};
</script>

<style lang="scss">
	.transaction {
		position: relative;

		.transactionContent {
			padding: 30rpx;
			box-sizing: border-box;

			.zc {
				width: 100%;
				height: 193rpx;
				position: relative;
				color: #ffffff;
				margin-bottom: 40rpx;

				image {
					width: 690rpx;
					height: 193rpx;
				}

				> view {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #ffffff;
					line-height: 23rpx;

					.usdtsl {
						font-size: 36rpx;
						font-weight: 400;
						color: #ffffff;
						line-height: 36rpx;
						padding: 39rpx 0 30rpx;
					}
				}
			}

			.btns {
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				> view {
					width: 50%;
					height: 80rpx;
					text-align: center;
					line-height: 78rpx;
					background-color: #ffffff;
					border: 1rpx solid #2a62ff;
					color: #2a62ff;
					box-sizing: border-box;
				}

				.cz_btn {
					border-radius: 10rpx 0px 0px 10rpx;
				}

				.tb_btn {
					border-radius: 0px 10rpx 10rpx 0px;
				}

				.active {
					background-color: #2a62ff;
					color: #ffffff;
				}
			}

			.cz_content {
				.czm {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 40rpx 0 60rpx;

					.title {
						color: #666666;
						font-size: 24rpx;
						text-align: center;
						line-height: 23rpx;
					}

					.ewm_img {
						display: flex;
						justify-content: center;
						padding: 30rpx 0 41rpx;

						image {
							width: 320rpx;
							height: 320rpx;
						}
					}

					.czm_code {
						color: #666666;
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-left: 16rpx;
						}
					}
				}

				.wxts {
					.title {
						font-size: 30rpx;
						color: #1a1a1a;
						margin-bottom: 30rpx;
					}

					.list {
						display: flex;
						flex-direction: column;
						font-size: 24rpx;
						color: #333333;
						line-height: 36rpx;
					}
				}
			}

			.tb_contnet {
				padding: 30rpx 0 0 0;

				.tbsl {
					width: 100%;
					// height: 334rpx;
					background: #ffffff;
					border-radius: 10rpx;
					color: #1a1a1a;
					padding: 0 20rpx;
					box-sizing: border-box;
					margin-bottom: 40rpx;

					.item {
						padding: 30rpx 0 20rpx;
						border-bottom: 1rpx solid #e5e5e5;

						.tips {
							font-size: 30rpx;
							font-weight: 600;
							margin-bottom: 28rpx;
							line-height: 28rpx;
						}

						.inputs {
							font-size: 24rpx;
							display: flex;
							flex-direction: row;

							image {
								width: 24rpx;
								height: 24rpx;
							}

							input {
								font-size: 24rpx;
								flex-grow: 1;
								margin-right: 20rpx;
							}

							text {
								color: #2a62ff;
							}
						}
					}

					.ktbsl {
						font-size: 24rpx;
						color: #1a1a1a;
						font-weight: 400;
						padding: 20rpx 0 29rpx;
						line-height: 23rpx;
					}
				}

				.wxts {
					margin-bottom: 60rpx;

					.title {
						font-size: 30rpx;
						color: #1a1a1a;
						margin-bottom: 30rpx;
					}

					.list {
						display: flex;
						flex-direction: column;
						font-size: 24rpx;
						color: #333333;
						line-height: 36rpx;
					}
				}
			}

			.btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				background: #2a62ff;
				border-radius: 10rpx;
				text-align: center;
				font-size: 34rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
</style>
